@extends('mobile.layout')



@section('style')
    @parent
    <link rel="stylesheet" type="text/css" href="{{ asset('static/mobile/less/product.css') }}?v={{ app('cache.config')->get('asset_version') }}"/>

@stop

@section('script')
    @parent

@stop


@section('content')
    <section class="product-container">
        <div class="wrapper">
            <div class="page-heading">
                <h1 class="page-title">{{ $cate->name }}</h1>
                <ul class="breadcrumb">
                    <li><a href="/">首頁</a></li>
                    <li><a href="{{ url()->current() }}">{{ $cate->name }}</a></li>
                </ul>
            </div>

            <div class="product-main">
                @foreach($product as $item)
                    <div class="goods">
                        <div class="box">
                            <div class="box-img">
                                <a href="{{ url('product/'.$item->id) }}">
                                    <img src="{{ asset_upload($item->img) }}" alt="{{ $item->name }}">
                                </a>
                            </div>
                            <div class="box-body">
                                <div class="pbb">
                                    <p class="sale">已購{{ $item->fictional_sales?:0 }}件</p>
                                    <p class="title"><a href="{{ url('product/'.$item->id) }}">{{ $item->name }}</a></p>
                                </div>
                                <div class="atr">
                                    @if($cate->id == 30 || $cate->id == 31)
                                    <div class="taste">
                                        <div class="taste-item ">
                                            <p class="taste-title">濃郁度 / Intensity</p>

                                            <p class="taste-speed">
                                                @php
                                                    $extent = $item->sweet_extent;
                                                @endphp
                                                @for($i=0;$i<5;$i++)

                                                    @if($extent>=1)
                                                        <span class="dot" style="--progress:100%"></span>
                                                    @else
                                                        <span class="dot" style="--progress:{{ ($extent>0?$extent:0)*100 }}%"></span>
                                                    @endif
                                                    @php
                                                        $extent = $extent-1;
                                                    @endphp
                                                @endfor

                                            </p>
                                        </div>

                                        <div class="taste-item ">
                                            <p class="taste-title">涼度 / Coolness</p>

                                            <p class="taste-speed">
                                                @php
                                                    $extent = $item->strong_extent;
                                                @endphp
                                                @for($i=0;$i<5;$i++)

                                                    @if($extent>=1)
                                                        <span class="dot" style="--progress:100%"></span>
                                                    @else
                                                        <span class="dot" style="--progress:{{ ($extent>0?$extent:0)*100 }}%"></span>
                                                    @endif
                                                    @php
                                                        $extent = $extent-1;
                                                    @endphp
                                                @endfor

                                            </p>
                                        </div>

                                        <div class="taste-item ">
                                            <p class="taste-title">擊喉感 / Throat sensation</p>

                                            <p class="taste-speed">
                                                @php
                                                    $extent = $item->sense_extent;
                                                @endphp
                                                @for($i=0;$i<5;$i++)

                                                    @if($extent>=1)
                                                        <span class="dot" style="--progress:100%"></span>
                                                    @else
                                                        <span class="dot" style="--progress:{{ ($extent>0?$extent:0)*100 }}%"></span>
                                                    @endif
                                                    @php
                                                        $extent = $extent-1;
                                                    @endphp
                                                @endfor

                                            </p>
                                        </div>

                                        <div class="taste-item ">
                                            <p class="taste-title">推薦度 / Recommendation</p>

                                            <p class="taste-speed">
                                                @php
                                                    $extent = $item->recommend_extent;
                                                @endphp
                                                @for($i=0;$i<5;$i++)

                                                    @if($extent>=1)
                                                        <span class="dot" style="--progress:100%"></span>
                                                    @else
                                                        <span class="dot" style="--progress:{{ ($extent>0?$extent:0)*100 }}%"></span>
                                                    @endif
                                                    @php
                                                        $extent = $extent-1;
                                                    @endphp
                                                @endfor

                                            </p>
                                        </div>

                                    </div>
                                    @endif
                                    <div class="and">
                                        <p class="price">${{ round($item->price) }}</p>
                                        <div class="su-cart">

                                            <input class="cart-input" id="cart-input-{{ $item->id }}" readonly name="cart_num_shw" value="1" type="text">
                                            <i class="iconfont cart-reduce cart-disable">&#xe60f;</i>
                                            <i class="iconfont cart-add">&#xe604;</i>
                                        </div>
                                    </div>
                                </div>
                                <a class="add-cart-btn event-add-cart" id="add-cart-btn" data-id="{{ $item->id }}" href="javascript:;" data-observer="加入購物袋-{{ $item->name }}">
                                    <span><i class="iconfont">&#xe652;</i>加入購物袋</span>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection
